<template>
    <div class="room-item" @click="toDetail">
        <div class="tag" v-if="isNear && item.distance">离我最近</div>
        <u--image
            :src="item.headerPicture"
            mode="aspectFill"
            :lazy-load="true"
            width="100%"
            height="284rpx"
        ></u--image>
        <div class="room-info">
            <p class="name">{{ item.name }}</p>
            <div class="footer">
                <p class="addr">
                    {{ item.address }}
                </p>
                <div class="location" v-if="item.distance">
                    <img class="image" src="@/static/images/index/fly.png" />
                    {{ item.distance || '' }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'RoomItem',
    props: {
        item: {
            type: Object,
            default: () => {
                return {};
            },
        },
        isNear: {
            type: Boolean,
            default: () => {
                return false;
            },
        },
    },
    methods: {
        toDetail() {
            if (!uni.getStorageSync('token')) {
                uni.navigateTo({
                    url: '/pages/login/index',
                });
                return false;
            }
            uni.navigateTo({
                url: '/pages/room/detail?id=' + this.item.id,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.room-item {
    width: 100%;
    height: 404rpx;
    background: #fff;
    border-radius: 24rpx;
    overflow: hidden;
    position: relative;
    .tag {
        position: absolute;
        left: 0;
        top: 0;
        background: #5428ec;
        padding: 2rpx 10rpx;
        color: #fff;
        font-size: 24rpx;
        border-radius: 24rpx 0 8rpx 0;
        z-index: 100;
    }
    .room-info {
        height: 120rpx;
        padding: 0 40rpx;
        z-index: 100;
        @include flexBox(center, flex-start, column);
        .name {
            font-size: 30rpx;
            color: #5c5c5c;
            font-weight: 600;
        }
        .footer {
            width: 100%;
            font-size: 24rpx;
            color: #5c5c5c;
            @include flexBox(space-between, center);
            .addr {
                margin-top: 8rpx;
                @include ellipsis(1);
            }
            .location {
                @include flexBox(center, center);
                font-weight: 500;
                color: #5c5c5c;
                margin-left: 20rpx;
                .image {
                    width: 20rpx;
                    height: 20rpx;
                    background: none;
                    margin-right: 10rpx;
                }
            }
        }
    }
}
</style>
